<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/30
  File: card.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>card</title>
  <style>
    #app {
      width: 500px;
      height: 350px;
    }

    .title {
      height: 50px;
    }

    .title span {
      width: 100px;
      height: 50px;
      background-color: #666;
      display: inline-block;
      line-height: 50px;
      /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
      text-align: center;
    }

    .content .list {
      width: 500px;
      height: 300px;
      background-color: deepskyblue;
      display: none;
    }

    .content .active {
      display: block;
    }

    .title .current {
      background-color: deepskyblue;
    }
  </style>
</head>

<body>
  <!-- #region -->
  <!-- #endregion -->
  <div id="app">
    <div class="title">
      <span @click="num=0" :class="change(0)">国内新闻</span>
      <span @click="num=1" :class="change(1)">国际新闻</span>
      <span @click="num=2" :class="change(2)">银河新闻</span>
    </div>
    <div class="content">
      <div class="list" :class="change(0, 'active')">国内新闻列表</div>
      <div class="list" :class="change(1, 'active')">国际新闻列表</div>
      <div class="list" :class="change(2, 'active')">银河新闻列表</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建 Vue 实例 , 得到ViewModel
    var card = new Vue({
      el: "#app",
      data: {
        num: 0,
      },
      methods: {
        change(data, style = "current") {
          if (this.num == data) {
            return style
          }
        }
      }
    });
  </script>
</body>

</html>